// Namespace
.c-content {
	h1,
	h2,
	h3 {
		line-height: $line-height-tight;
		overflow-wrap: break-word;

		// Breakpoints
		@include mappy-bp(lap-medium) {
			margin-left: map-get($global-post-content-inset, small) * -1;
		}
	}

	h2,
	h3 {
		@include var(color, heading-text);
	}


	// Second-level Heading
	//
	// This is the first content sectioning element to use, as the post's title
	// uses a `h1` element. Second-level heading styling is controlled using the
	// `heading-beta()` mixin.
	//
	// Markup:
	// <h2>How to navigate a website with a keyboard</h2>
	//
	// Style guide: Components.post.h2
	h2 {
		@include heading-large();

		code {
			letter-spacing: $font-tracking-tighter;
		}
	}


	h3 {
		@include heading-medium();
	}


	h4 {
		@include heading-small();
	}

	h5 {
		@include var(color, text-accent);
		font-weight: $font-weight-bold;
		margin-bottom: -4ch;
	}
}
